<template>
    <div id="app">
      <el-container class="el-container">
          <div class="leftContent">
              <img class="WebLogo" src="static\images\WebLogo.png"/>
          </div>
          <div class="RightContent">
              <div class="loginView">
                <div class="title">
                  <span>登 录</span>
                </div>
                <div class="inputView">
                  <el-form ref="form" :model="form">
                    <el-form-item label="账号">
                      <el-input v-model="account" type="text"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                      <el-input v-model="password" type="password"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button @click="Login">登录</el-button>
                      <!-- <el-button @click="$router.back(-1)">取消</el-button> -->
                    </el-form-item>
                  </el-form>
                </div>
              </div>
          </div>
      </el-container>
    </div>
</template>
<script>
import Axios from 'axios';
  export default({
    data() {
    return {
      localhost:this.global.localhost,
      account:'',
      password:''
    }
  },
  methods: {
      Login(){
      const that=this
      Axios({
        url:that.localhost+'/users/login/'+that.account+'/'+that.password,
        method:'post'
      }).then(
        function(res){
          console.log(res.data);
          var userInfo=res.data
          // console.log(userInfo.length);
          console.log(userInfo[0])       
            if(userInfo.length===1){
              that.$notify({
                title: '登录成功',
                message: '欢迎您登录，'+userInfo[0].userName,
                type: 'success'
              });
              // sessionStorage.setItem("userInfo", userInfo[0]);
              sessionStorage.setItem("id", userInfo[0].id);
              sessionStorage.setItem("image", userInfo[0].image);
              sessionStorage.setItem("permissions", userInfo[0].permissions);
              sessionStorage.setItem("userName", userInfo[0].userName);
              sessionStorage.setItem("account", userInfo[0].account);
              sessionStorage.setItem("password", userInfo[0].password);
              that.$router.replace('/navigation')
            }else{
              const h = that.$createElement;
              that.$notify.error({
                title: '登录失败',
                message: '请校验账号或密码是否正确'
              });
            }
          // userInfo.forEach(data => {
          //   if(data.account==that.account && data.password==that.password){
          //     that.$notify({
          //       title: '登录成功',
          //       message: '欢迎您登录，'+data.userName,
          //       type: 'success'
          //     });
          //     that.$router.replace('/navigation')
          //   }else{
          //     const h = that.$createElement;
          //     that.$notify.error({
          //       title: '登录失败',
          //       message: '请校验账号或密码是否正确'
          //     });
          //   }
          // });
        }
      ).catch(function(res){
        console.log(res);
        that.$notify.error({
                title: '登录失败',
                message: '请检查网络环境'
              });
      });
    }
  },
  created(){
    // console.log(window.navigator);
  }
  })
</script>
      
<style scoped>
  .WebLogo{
    width: 30%;
  }
  /* .el-container{
  } */
  .leftContent{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32%;
    background-color: white;
  }
  .RightContent{
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom-left-radius: 20px;
    background-color: #024DA2;
    border-top-left-radius: 20px;
    justify-content: center;
  }
  .loginView{
    width: 40%;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.66);
  }
  .title{
    width: 100%;
    height: 20%;
    display: flex;
    margin-top: 3vh;
    align-items: center;
    font-size: 25px;
    font-weight: 600;
    color: #000;
  }
  .title span{
    margin-left: 20px;
  }
  .inputView{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3vh;
    width: 100%;
    height: 80%;
  }
  .el-form-item{
    display: flex;
    justify-content: center;
  }
  .el-form-item__label{
    font-size: 15px;
    font-weight: 600;
  }
</style>
      